<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
  </head>
  <body>
    <!-- 双向数据绑定涉及到模板发生数据改变 数据层同步发生改变
    数据->视图： 数据发生改变，视图层同步发生改变 -->
        <!-- 1. 需要准备一个可以输入的dom元素  input -->
        <!-- 2. 需要准备双向绑定的数据 -->
        <!-- 3. object.defineRropery 将数据的获取和改变通过get 和 set 获取 -->
<!--  实现改变数据层 视图层发生改变 -->
        <!-- 在set()方法中的回调函数可以获取到被改变的值 -->
        <!-- 4. 通过e.target.value 获取到输入框中的值 被改变时获取 -->
<!-- 实现视图层到数据层的改变 -->
        <!-- 1. 获取 input的dom给dom节点 绑定事件 监听 input事件 -->
        <!--2.  通过e.target.value 获取到input中输入框的值 -->
        <!-- 3. 将获取到的数据 赋值给 data.name. 触发set方法 -->
        <!-- 4. set 方法里可以获取到 input中的输入值 -->
        <!-- 5. 需要声明一个 set 到get 的中间量 _value -->
        <!-- 6. 通过在set 中赋值 ，在get中return出来 ，实现了视图层到数据层改变 -->
<input type="text" id="ipt">
  </body>
  <script>
  let data = {
    name:''
  }
  let _value = ''
  // Object.defineProperty('监听的对象', '监听对象中的属性','一个包含get 和set 的对象')
  Object.defineProperty(data,'name',{
    // 被改变时触发
    set(newName){
// console.log(newName,'我被改变了');
// 数据改变 驱动视图改变
document.getElementById('ipt').value = newName
    _value =newName 

    },
    // 被调用时触发
    get(){
// console.log('我被调用了');
return _value
    }
  }),
  
  document.getElementById('ipt').addEventListener('input',e=>{
    data.name =  e.target.value 
  })

  </script>
</html>